<template>
  <div v-if="value" :class="$style.making" @click.stop>
    <div :class="$style.makingDiv" @click="makingCloseHandle"></div>
    <!-- <svg-icon icon-class="cuowuguanbiquxiao-line_1" :class="$style.svgIcon" @click.native="closeHandle"></svg-icon> -->
    <!-- <i :class="['el-icon-circle-close', $style.svgIcon]" @click="closeHandle"></i> -->
    <span class="el-image-viewer__btn el-image-viewer__close" @click="closeHandle">
      <i class="el-icon-circle-close"></i>
    </span>
    <div :class="$style.content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Making',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    clickMakingClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  watch: {
    value(v) {
      if (!v) {
        this.$emit('close')
      }
    }
  },
  methods: {
    makingCloseHandle() {
      if (this.clickMakingClose) this.closeHandle()
    },
    closeHandle() {
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="scss" module>
.making{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  .makingDiv{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0.5;
    z-index: 1;
  }
  .svgIcon{
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 24px !important;
    fill: #fff !important;
    color: #fff !important;
    z-index: 999 !important;
    cursor: pointer;
  }
  .content{
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 80vh;
    max-width: 80vw;
    display: inline-block;
    transform: translate(-50%,-50%);
    z-index: 990;
  }
}
</style>
